<template>
  <div class="login-wrap">
    <el-form
      label-position="labelPosition"
      label-width="80px"
      :model="formdata"
      class="from-login"
    >
    <h2>用户登录</h2>
      <el-form-item label="用户名" class="login-put">
        <el-input v-model="formdata.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="login-put" >
        <el-input v-model="formdata.password" style="padding-right=100px"></el-input>
      </el-form-item>
      <el-button type="primary" class="login-btn" @click ="getuser">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            formdata: {
                username : '',
                password : '',
                token: '159b1e1ef7ec173a08d6681941afa59a'
            },
            listData:[]

        }
    },
    methods:{
      getuser(){
         axios.post('/login',{}).then(
                res=>{
                  // 请求成功
                    if(res.status == 200){
                      // 有数据返回
                        if(res.data.articles.length){
                            this.listData=res.data.articles;
                            // 存储token
                            localStorage.setItem('token',this.formdata.token)
                           
                            // 跳转到home页面
                            this.$router.push({name: home})
                             // 弹出提示框
                            this.$message.success('登录成功');
                        }
                    }
                    else{
                      this.$message.error('失败');
                    }
                }
            ).catch(err=>this.$message.error(res.statusText));
      }
    }
      
  };
</script>

<style>
.login-wrap{
    background-color: #181717;
    height: 100%;
    width: 100%;
    display: flex;
    text-align: center;
   
}

.from-login{
  margin: 0 10% 10% 35%;
  background-color: aliceblue;
  width: 25%;
  margin-top: 15%;
  border-radius: 10px;
}

.login-put{
    margin-right: 10%;
}

.login-btn{

    margin-bottom: 20px;
    
}


</style>